<template>
  <div class="app-container receipt-detail">
    <header class="detail-container">
      <div class="top-bar">
        <div class="top-bar-tag"></div>
        <div class="top-bar-title">收文审核详情</div>
      </div>
      <div class="detail-table">
        <table>
          <tr>
            <td>来文标题：</td>
            <td>{{receipt.docTitle}}</td>
            <td>收文编号：</td>
            <td>{{receipt.docCode}}</td>
            <td>来文编号：</td>
            <td>{{receipt.codeName}}</td>
            <td>归档分类：</td>
            <td>{{archiveTypeArr[parseInt(receipt.archiveType)-1]}}</td>
          </tr>
          <tr>

          </tr>
          <tr>
            <td>来文日期：</td>
            <td>{{receipt.receiptDate}}</td>
            <td>流转状态：</td>
            <!-- let-todo "待办收文详细"的流转状态可能不是归档-->
            <td>归档</td>
            <td>来文单位：</td>
            <td>{{receipt.receiptUnit}}</td>
            <td>保管期限：</td>
            <td>{{storePeriodArr[parseInt(receipt.storePeriod)-1]}}</td>
          </tr>
          <tr>
            <td>来文类型：</td>
            <td>{{receiptTypeArr[parseInt(receipt.receiptType)-1]}}</td>
            <td>审核人：</td>
            <td>{{receipt.auditorName}}</td>
            <td>等级：</td>
            <td>{{docLevelArr[parseInt(receipt.docLevel)-1]}}</td>
            <td>附件：</td>
            <td></td>
          </tr>
        </table>
      </div>
      <div class="detail-content">
        {{receipt.receiptContent}}
      </div>
    </header>
    <section class="circulation-container">
      <div class="top-bar">
        <div class="top-bar-tag"></div>
        <div class="top-bar-title">公文流转</div>
      </div>
      <div class="main">

        <div class="table-container">
          <el-table>
            <el-table-column label="流转顺序"></el-table-column>
            <el-table-column label="签署人"></el-table-column>
            <el-table-column label="内容"></el-table-column>
            <el-table-column label="时间"></el-table-column>
          </el-table>
        </div>

        <div class="suggestion-container" v-if="showSave">
          <div class="top-bar">
            <div class="top-bar-title">您的意见</div>
          </div>
          <div class="section">
            <div class="comment-box">
              <el-input type="textarea" :rows="5" v-model="comment" :disabled="!showSave"></el-input>
            </div>

            <div class="btn-box">
              <el-row>
                <el-select v-model="temp" style="width: 100%" placeholder="快捷选项" @change="change">
                  <el-option v-for="(item,index) in commentList" :key="index" :label="item.label" :value="item.value"></el-option>
                </el-select>
              </el-row>
              <el-row style="margin-top: 44px;">
                <el-button :loading="saveLoading" @click="submit" :disabled="isSave" v-text="btnText"></el-button>
              </el-row>
            </div>
          </div>
        </div>

      </div>
    </section>
  </div>
</template>

<script>
  import receiptAPI from '@/api/receipt/receipt'
  export default {
    name: "ReceiptHandleDetail",
    data() {
      return {
        receipt: {
          docId: this.$route.params.id,
          docTitle: '',
          docCode: '',
          codeName: '',
          codeYear: '',
          codeNo: '',
          receiptDate: '',
          receiptUnit: '',
          archiveType:'',
          docLevel:'',
          storePeriod:'',
          receiptContent:'',
          auditor:'',
          docState:'',
          signIndex:'',
          signCount:'',
          parentDocId:'',
          hasIssue:'',
          creator:''
        },
        archiveTypeArr:['局本级类','市级类','区其他类','综合类','区级类','涉法涉诉','省级类'],
        docLevelArr:['机密','绝密','一般','私密'],
        receiptTypeArr:['传阅件','一般件','承办件','涉法涉诉'],
        storePeriodArr:['10年','20年','30年','不归档','永久'],
        temp:'',
        comment:'',
        commentList:[
          {label:'请发文',value:'请发文'},
          {label:'已处理',value:'已处理'},
          {label:'已阅',value:'已阅'},
          {label:'请领导审核',value:'请领导审核'}
        ],
        saveLoading:false,
        flag:false
      }
    },
    computed:{
      isSave(){
        return this.comment.trim().length === 0
      },
      btnText(){
        return this.comment.trim().length === 0 ? '请填写您的意见' : '提交'
      },
      showSave(){
        return this.$route.params.flag === 'true'
      }
    },
    created() {
      this.fetchData()
    },
    methods: {
      change(val){
        this.comment = val
      },
      submit(){
        if(this.saveLoading){
          return
        }
        this.saveLoading = true
        receiptAPI.receiptDocumentHandle(this.receipt.docId,{comments:this.comment}).then(res=>{
          this.saveLoading = false
          this.$message.success('提交成功')
          this.$router.push('/receipt/receipt-wait-handle')
        })
      },
      fetchData(){
        // let-todo 缺少拉取流程人员的api
        receiptAPI.getById(this.receipt.docId).then(res=>{
          console.log(res)
          this.receipt = res
         /* this.receipt = res.result
          console.log(this.receipt)*/
        }).catch(err=>{
          console.log(err)
        })
      }
    }
  }
</script>
<style lang="scss">
  .receipt-detail {
    .el-dialog {
      width: 400px;
      .el-select {
        width: 100%;
      }
    }
    .el-dialog__footer {
      padding-bottom: 10px;
    }
  }
</style>
<style scoped lang="scss">
  $height:35px;
  $borderColor:1px solid #e0e0e0;
  $boxShadow:0 0 3px rgba(0,0,0,0.1);

  .list-move {
    transition: transform 0.3s linear;
  }

  .app-container {
    font-size: 14px;
    padding: 15px 150px;
    background-color: #F4F9FD;
    min-height: calc(100vh - 86px);
    box-sizing: border-box;
  }

  .detail-container {
    border: $borderColor;
    margin-bottom: 20px;
    box-shadow: $boxShadow;
    overflow: hidden;
    border-radius: 5px;
    .detail-table {
      padding: 15px;
      line-height: 30px;
      background-color: white;
    }
    .detail-content {
      background-color: white;
      padding: 15px;
      line-height: 30px;
      border-top: $borderColor;
    }
  }

  .circulation-container {
    border: $borderColor;
    margin-bottom: 20px;
    box-shadow: $boxShadow;
    overflow: hidden;
    border-radius: 5px;
    .main {
      padding: 15px;
      background: white;

      i {
        font-size: 15px;
        cursor: pointer;
        transition: all 0.1s linear;
        color:gray;
        &:hover {
          color: #409EFF;
        }
        &.template-add {
          margin-left: 10px;
          font-size: 20px;
        }
      }

      .table-container {
        margin-bottom: 20px;
      }
      .suggestion-container {
        border: 1px solid #eee;
        box-shadow: 0 0 1px rgba(0,0,0,0.1);
        .section {
          padding: 15px;
          display: flex;
          justify-content: space-between;
          .comment-box {
            width: 70%;
            margin-right: 20px;
          }
          .btn-box {
            width: 30%;
          }
        }
      }

    }
  }

  table tr td:nth-of-type(odd){
    text-align: right;
    width: 10%;
    color: #606060;
    font-size: 13px;
  }
  table tr td:nth-of-type(even){
    text-align: left;
    padding-left: 10px;
    width: 15%;
    box-sizing: border-box;
    color: #555555;
  }

  .top-bar {
    height: $height;
    line-height: $height;
    padding: 0 15px;
    background-color: #FBFBFB;
    border-bottom: $borderColor;
    display: flex;
    justify-content: space-between;
    .top-bar-tag {
      width: 5px;
      height: $height;
    }
    .top-bar-title{
      font-size: 16px;
    }
    .top-bar-section {

    }
  }



</style>

